<template>
  <div class="index">
    <img  src="@/assets/images/packageSerial/drawable-mdpi.png" class="test_img" alt />
    <input type="text" v-model="code" placeholder="输入权益卡上的验证码开始测评" />
    <button class="login" @click="register()">登录</button>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { login } from "@/api/login";
export default {
  data() {
    return {
      code: ""
    };
  },
  methods: {
    ...mapMutations(["SET_INFO"]),
    async register() {
      let {code} = this.$route.query
      if (this.code != code) return this.$toast.fail("序列号输入错误");
        let res = await login({
          username: 'zmsuser001',
          password: '12345678'
        });
        if (res.code == 200) {
          sessionStorage.setItem("token", res.data.token);
          this.SET_INFO(res.data);
          this.$router.push("/evaluationList?type=task");
        }
    }
  },
};
</script>

<style lang="less" scoped>
.index {
  width: 100%;
  height: 100vh;
  text-align: center;
  padding: 100px 0 0 0;
  box-sizing: border-box;
  > .test_img {
    width: 231.67px;
    height: 207px;
    margin: 10px auto 33px;
  }
  > input {
    width: calc( 100% - 40px );
    height: 46px;
    background: #ffffff;
    border: 0.67px solid #dedfe6;
    border-radius: 6.67px;
    margin: 0 20px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    color: #aaaaaa;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  margin-bottom: 26.67px;
  }
  input::-webkit-input-placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #aaaaaa;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  }
}
button {
  width: 333.33px;
  height: 48.61px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0.00) 20%), #00aeff;
  border-radius: 6.94px;
  font-size: 17.36px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  outline: none;
  border: 0;
  margin-bottom: 13px;
}
</style>